<template>
  <ul>
    <li v-for="mv in mvs" :key="mv.id">
      <p>{{ mv.name }}</p>
      <div class="hover" @click="goDetails(mv.id)">
        <el-icon>
          <CaretRight />
        </el-icon>
      </div>
      <el-image :src="mv.cover" alt="" lazy></el-image>
    </li>
  </ul>
</template>

<script>
import { CaretRight } from '@element-plus/icons-vue'
import { updateMvInterface, getMvRedioInterface } from '../../api/user'
import { mapMutations, mapState } from 'vuex'

export default {
  created() {
    this.getMv()
  },
  data() {
    return {
      mvs: [],
      flag: false,
      mvid: [],
    }
  },
  //vuex辅助函数 mapState mapGetters放入computed中
  computed: {
    ...mapState("playMVModule", ['videoSrc'])//通过mapSate辅助函数拿到playMVModule模块中的video状态
  },
  methods: {
    //-----------mapMutations mapActions放入methods中
    ...mapMutations("playMVModule", ['updateMvid', 'getmvsrc']),
    //获取mv图片歌名信息 
    getMv() {
      updateMvInterface().then(res => {
        this.mvs = res.data
      })
    },
    //获取每个mv的id
    getmvid() {
      this.mvid = this.mvs.forEach(element => {
        return element.id
      });
    },

    // 跳转mv详情 在vuex里获取点击的mv id、url 进行路由跳转
    goDetails(mvid) {
      getMvRedioInterface({ id: mvid }).then(res => {
        this.updateMvid(mvid)
        this.getmvsrc(res.data.url)
        this.$router.push(
          { name: 'recommendMVdetails' }
        )
      })
    }

  },
  //播放图标组件
  components: {
    CaretRight,
  },

}
</script>

<style lang="scss" scoped>
ul {
  // width: 900px;
  // background-color: red;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  // position: relative;
}

ul>li {
  // border: 1px solid black;
  list-style: none;
  // display: flex;
  width: 350px;
  height: 300px;
  // margin-right:10px;
  color: black;
  position: relative;
}

li>p {
  font-size: 18px;
  text-align: center;
  height: 20px;
  padding: 10px 0 26px 0px;
}

.el-image {
  margin-top: 10px;
  width: 350px;
  height: 200px;
  object-fit: contain;
  display: flex;
  border-radius: 20px;
}

.hover {
  width: 350px;
  height: 246px;
  position: absolute;
  bottom: 0;
  left: 20;
  right: 0;
  top: 0;
  z-index: 1;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0)
}

.hover:hover {
  background: rgba(0, 0, 0, 0.3)
}

.el-icon {
  width: 350px;
  height: 246px;
  color: rgba(0, 0, 0, 0);
  font-size: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}

.el-icon:hover {
  color: rgba(0, 0, 0, 0.7)
}

// #model {
//   width: 800px;
//   height: 600px;
//   background-color: red;
//   position: fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   // z-index: 1000;
//   video{
//     width: 100%;
//     height: 100%;
//   }
// }
</style>